<template>
    <div class="scoreAll">
        <div class="basicInfo">
            <span>赛事名称：<b>xxx夏季网球大赛</b></span>
            <span>裁判长：<b>刘德华</b></span>
            <div class="btnGroup">
                <el-button type="primary" class='goMatchForm' @click="scheduleAuto">一键排战表</el-button>
                <el-button type="primary" class='goMatchForm' @click="scheduleHandle">手动排战表</el-button>
            </div>
        </div>
        <div class="tableBox">
             <div class="date">
               <span>
                   比赛日期：
               </span>
                <el-date-picker v-model="date" type="date" placeholder="选择日期">
                </el-date-picker>
           </div>
            <div class="tableMain">
                <table class='table1'>
                    <thead>
                        <tr>
                            <td rowspan="2">组别</td>
                            <td rowspan="2">签位</td>
                            <td colspan="12">第一阶段轮次</td>
                        </tr>
                         <tr>
                            <td colspan="2">R1</td>
                            <td colspan="2">R2</td>
                            <td colspan="2">R3</td>
                            <td colspan="2">R4</td>
                            <td colspan="2">R5</td>
                            <td colspan="2">R6</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>男子青年组（16）</td>
                            <td>4组（2*4+2*3）</td>
                            <td>123</td>
                            <td>21312</td>
                            <td>asdas</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                        </tr>
                         <tr>
                            <td>男子青年组（16）</td>
                            <td>4组（2*4+2*3）</td>
                            <td>123</td>
                            <td>
                                <select name="" id="">
                                    <option value="1">1</option>
                                     <option value="1">1</option>
                                      <option value="1">1</option>
                                       <option value="1">1</option>
                                        <option value="1">1</option>
                                         <option value="1">1</option>
                                          <option value="1">1</option>
                                           <option value="1">1</option>
                                            <option value="1">1</option>
                                             <option value="1">1</option>

                                </select>
                            </td>
                            <td>asdas</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                            <td>asd</td>
                        </tr>
                    </tbody>
                </table>
                <table class="field">
                    <div class="more" @click='moreField'>
                        <i class='iconfont icon-add'></i>
                    </div>
                    <thead>
                        <tr>
                            <td>场序</td>
                            <td>1号场地</td>
                            <td>2号场地</td>
                             <td>1号场地</td>
                            <td>2号场地</td>
                             <td>1号场地</td>
                            <td>2号场地</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='(item,index,key) in rankList' :key='key'>
                            <td>{{index+1}}</td>
                            <td>

                            </td>
                             <td>

                            </td>
                            <td>

                            </td>
                             <td>

                            </td>
                            <td>

                            </td>
                             <td>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
         <div class="btnBottom">
                <el-button type="primary" class='goMatchForm' @click="checkSchedule">确定</el-button>
            </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                rankList:[
                  '',
                ],
                hasDiy:false,
                isGroup:0,
                date:''
            }
        },
        methods:{
            diy(){
                this.hasDiy = true;
            },
            cancle(){
                this.hasDiy = false;
            },
            goback(){

            },
            moreField(){
                var item = '';
                this.rankList.push(item);
            },
            scheduleAuto(){
               this.$router.push('/index/match/scheduleAuto')
            },
            scheduleHandle(){
              this.$router.push('/index/match/scheduleHandle')
            },
            checkSchedule(){
              this.$router.push('/index/match/checkSchedule')
            }
        }
    }
</script>
<style lang="less" scoped>
.scoreAll{
    padding:20px;
    .basicInfo{
        background: rgba(66,185,131,.1);
        border-radius: 2px;
        line-height: 40px;
        height: 40px;
        padding: 15px;
        overflow: hidden;
        span{
            margin-right:20px;
        }
        .btnGroup{
            height: 60px;
            float: right;
            margin-right:20px;
        }
    }
    .tableBox{
        box-shadow: 0px 2px 5px #eaeaea;
        margin-top:20px;
        border:1px solid #eaeaea;
        padding-bottom:10px;
        .date{
            padding:10px 15px;
        }
        .tableMain{
            margin-top:20px;
            padding:0 20px;
            .table1{
                margin-top:10px;
                width: 100%;
                text-align: center;
                border-collapse:collapse;
                border-left:1px solid #eaeaea;
                border-top:1px solid #eaeaea;
                thead{
                    tr{
                        height: 30px;
                        background-color: rgba(66, 185, 131, 0.1);
                        td{
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                        }

                    }
                }
                tbody{
                    tr{
                        height: 40px;
                        td{
                            width: 5%;
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                        }
                        td:first-child{
                            width: 20%;
                        }
                        td:nth-child(2){
                            width: 20%;
                        }
                    }
                }
            }
            .field{
                margin-top:10px;
                width: 100%;
                text-align: center;
                border-collapse:collapse;
                border-left:1px solid #eaeaea;
                border-top:1px solid #eaeaea;
                border-bottom:5px solid #eaeaea;
                position:relative;
                margin-bottom: 50px;
                .more{
                    position: absolute;
                    bottom:-15px;
                    height: 30px;
                    background-color: #eaeaea;
                    border-radius:15px;
                    width: 30px;
                    line-height: 30px;
                    color:#fff;
                    left:50%;
                    margin-left:-15px;
                    transition: all .5s;
                }
                .more:hover{
                    cursor: pointer;
                    background-color: #727272;
                }
                thead{
                    tr{
                        height: 40px;
                        background-color: rgba(66, 185, 131, 0.1);
                        td{
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                        }
                    }
                }
                tbody{
                    tr{
                        width: 100%;
                        height: 120px;
                        td{
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                        }
                        td:first-child{
                            width: 60px;
                        }
                    }
                }
            }
        }
    }
    .btnBottom{
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
}
</style>

